<template>

    <div v-loading="isBusy"
         element-loading-text="加载中...">

        <!--搜索栏-->
        <div class="list-searchbar">

            <el-space direction="horizontal" :size="30">

                <el-space :size="0">
                    <span>关键字：</span>
                    <el-input clearable
                              style="width: 200px"
                              placeholder="请输入关键字"
                              v-model="keyword"/>
                </el-space>

                <el-space :size="0">
                    <span>时间：</span>
                    <el-date-picker clearable
                                    v-model="dateTimeRange"
                                    :default-time="defaultDateTimeRange"
                                    type="datetimerange"
                                    range-separator="-"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"/>
                </el-space>

                <el-space :size="0">
                    <span>状态：</span>
                    <el-select placeholder="全部"
                               clearable
                               style="width: 100px"
                               v-model="selectedOption">
                        <el-option v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-space>

                <el-space :size="0">
                    <el-button type="primary"
                               @click="search()">
                        <el-icon class="el-icon--left">
                            <Search/>
                        </el-icon>
                        查询
                    </el-button>
                </el-space>

            </el-space>

        </div>

        <!--操作栏-->
        <div class="list-toolbar">
            <el-button type="primary"
                       @click="addClick()">
                <el-icon class="el-icon--left">
                    <Plus/>
                </el-icon>
                新增
            </el-button>
        </div>

        <!-- 列表 -->
        <el-table border stripe
                  width="100%"
                  max-height="calc(100vh - 350px)"
                  header-cell-class-name="tableHeaderRow"
                  :data="tableDatas">
            <el-table-column header-align="center" prop="number" label="编号" width="200"/>
            <el-table-column header-align="center" prop="name" label="名称" width="200"/>
            <el-table-column header-align="center" align="center" prop="sort" label="排序" width="75"/>
            <el-table-column header-align="center" align="center" prop="addedTime" label="新增时间" width="190" :formatter="dateFormatter"/>
            <el-table-column header-align="center" prop="description" label="描述"/>
            <el-table-column header-align="center" fixed="right" label="操作" align="center" width="170">
                <template #default>
                    <el-button type="primary"
                               size="small">
                        <el-icon class="el-icon--left">
                            <Edit/>
                        </el-icon>
                        编辑
                    </el-button>

                    <el-button type="danger"
                               size="small">
                        <el-icon class="el-icon--left">
                            <Delete/>
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination style="margin-top: 10px; justify-content: right"
                       layout="total, sizes, prev, pager, next, jumper"
                       :background="true"
                       :page-sizes="[100, 200, 300, 400]"
                       :total="pageCount"
                       v-model:page-size="pageSize"
                       v-model:current-page="pageIndex"
                       @size-change="loadData"
                       @current-change="loadData"/>

        <!-- 编辑样例页 -->
        <view-demo-edit v-model:visible="dialogVisible" @closed="editClosed"/>

    </div>
</template>

<script setup lang="ts">
    import { getCurrentInstance } from "vue";
    import ViewDemoEdit from "@/views/demo/DemoEditView.vue";
    import { busy } from "@/common/infrastructure/nprogress";

    defineOptions({
        name: 'DemoListView'
    })

    //region # 属性

    // 应用实例
    const { proxy }:any = getCurrentInstance()

    // 是否繁忙
    const isBusy = ref(false)

    // 会话窗口显示状态
    const dialogVisible = ref(false)

    // 表格数据列表
    const tableDatas = ref<Array<any>>()

    // 每页条目
    const pageSize = ref(100)

    // 当前页码
    const pageIndex = ref(1)

    // 分页总数
    const pageCount = ref(5000)

    // 关键字
    const keyword = ref("")

    // 时间区间
    const dateTimeRange = ref<[ Date, Date ]>([
        new Date(0, 1, 1, 0, 0, 0),
        new Date(0, 1, 1, 23, 59, 59),
    ])

    // 默认时间区间
    const defaultDateTimeRange:[ Date, Date ] = [
        new Date(0, 1, 1, 0, 0, 0),
        new Date(0, 1, 1, 23, 59, 59),
    ]

    // 选项
    const options = [
        {
            value: 'Item01',
            label: '选项01',
        },
        {
            value: 'Item02',
            label: '选项02',
        }
    ]

    // 选中的选项
    const selectedOption = ref('')

    //endregion

    //region # Hooks

    //endregion

    //region # 方法

    // Action

    /**
     * 新增点击
     * */
    const addClick = function() {
        dialogVisible.value = true
    }

    /**
     * 编辑关闭
     * @param result - 结果
     * */
    const editClosed = (result:boolean) => {
        console.log(result)
    }

    /**
     * 加载数据
     * */
    const loadData = () => {
        isBusy.value = true

        setTimeout(() => {
            isBusy.value = false
        }, 500)
    }

    /**
     * 查询
     * */
    const search = () => {

        console.log("关键字", keyword.value)
        console.log("开始时间", dateTimeRange.value[0].toDateTimeString())
        console.log("结束时间", dateTimeRange.value[1].toDateTimeString())
        console.log("状态", selectedOption.value)

        loadData()
    }

    // Private

    /**
     * 初始化时间
     * */
    const initDateTime = () => {
        const dateTimeNow = new Date();
        dateTimeRange.value.splice(0, 2);
        dateTimeRange.value.push(new Date(dateTimeNow.getFullYear(), dateTimeNow.getMonth(), dateTimeNow.getDate(), 0, 0, 0));
        dateTimeRange.value.push(new Date(dateTimeNow.getFullYear(), dateTimeNow.getMonth(), dateTimeNow.getDate(), 23, 59, 59));
    }

    /**
     * 初始化数据
     * */
    const initData = () => {
        tableDatas.value = new Array<any>()
        for (let i = 0; i < 50; i++) {
            let index = i + 1
            tableDatas.value.push({
                number: `no${index}`,
                name: `名称${index}`,
                sort: index,
                addedTime: new Date(),
                description: ''
            })
        }
    }

    /**
     * 时间格式化
     * @param row - 行数据
     * */
    const dateFormatter = (row:any) => {
        return row.addedTime.toDateTimeString()
    }

    //endregion

    //region # 事件

    /**
     * 加载完毕
     * */
    onMounted(async () => {

        initDateTime()
        initData()
    })
    //endregion

</script>

<style scoped>
    @import "DemoListView.less";
</style>